<template>
  <div class="login_bg">
    <!-- 登录面板 -->
    <div class="login_panal">
      <!-- 登录logo 旋转div -->
      <div class="login_logo"></div>
      <!-- 文字title -->
      <div class="login_text">
        <span>欢迎使用</span>
        <span>花卉租赁管理系统</span>
      </div>
      <!-- 登录的表单 -->
      <el-form :rules="rules" :model="user" ref="user">
        <el-form-item
          prop="account"
          :class="{ login_input: true, input_focus: input_focus1 }"
        >
          <el-input
            :maxlength="maxlength"
            placeholder="请输入用户名"
            v-model="user.account"
            @focus="click_input(1)"
            @blur="input_focus1 = false"
            clearable
          >
          </el-input>
        </el-form-item>
        <el-form-item
          prop="password"
          :class="{ login_input: true, input_focus: input_focus2 }"
        >
          <el-input
            :maxlength="maxlength"
            show-password
            placeholder="请输入密码"
            v-model="user.password"
            @focus="click_input(2)"
            @blur="input_focus2 = false"
            clearable
          >
          </el-input>
        </el-form-item>
      </el-form>
      <!-- 登录按钮 -->
      <div :plain="true" class="login_input login_btn" @click="isVerificationShow2=!isVerificationShow2" >
        登 录
      </div>
      <!-- 底部版权 -->
      <el-row :gutter="20">
        <el-col
          ><div class="grid-content bg-purple footer_copyright">
            Copyright&copy;2012 - 2019, 版权归天才花卉系统所有
          </div>
        </el-col>
      </el-row>

    </div>
    <!-- <div class="sk-chase">
  <div class="sk-chase-dot"></div>
  <div class="sk-chase-dot"></div>
  <div class="sk-chase-dot"></div>
  <div class="sk-chase-dot"></div>
  <div class="sk-chase-dot"></div>
  <div class="sk-chase-dot"></div>
</div> -->
    <!-- <div class="container"> -->
    <!-- <div class="login-box">
      <button @click="handleClick(1)">最简单用法</button>
      <div class="puzzle-box">
        <PuzzleVerification
          v-model="isVerificationShow1"
          :onSuccess="handleSuccess"
        />
      </div>
    </div> -->
<div class="login-box">
      <!-- <button @click="handleClick(2)">拼图形滑块</button> -->
      <div class="puzzle-box">
        <PuzzleVerification
          v-model="isVerificationShow2"
          :puzzleImgList="puzzleImgList"
          blockType="puzzle"
          :onSuccess="handleSuccess"
        />
      </div>
    </div>

    <!-- <div class="login-box">
      <button @click="handleClick(3)">控制大小</button>
      <div class="puzzle-box">
        <PuzzleVerification
          v-model="isVerificationShow3"
          width="300"
          height="200"
          blockSize="80"
          blockRadius="5"
          :onSuccess="handleSuccess"
        />
      </div>
    </div>

    <div class="login-box">
      <button @click="handleClick(4)">控制误差</button>
      <div class="puzzle-box">
        <PuzzleVerification
          v-model="isVerificationShow4"
          :puzzleImgList="puzzleImgList"
          deviation="20"
          blockType="puzzle"
          :onSuccess="handleSuccess"
        />
      </div>
    </div>

    <div class="login-box">
      <button @click="handleClick(5)">控制滑块出现位置范围</button>
      <div class="puzzle-box">
        <PuzzleVerification
          v-model="isVerificationShow5"
          wraperPadding="50"
          :onSuccess="handleSuccess"
        />
      </div> -->
    <!-- </div> -->
    </div>

  <!-- </div> -->
</template>

<script>
import http from '@/utils/httpUtil'
import { mapMutations } from 'vuex'
import PuzzleVerification from '@/components/puzzleVerification'

export default {
  data () {
    // let checkPhone = (rule, value, callback) => {
    //   let phoneReg = /^1[3456789]\d{9}$/
    //   if (!phoneReg.test(value)) {
    //     return callback(new Error('账号必需为手机号格式!'))
    //   }
    //   callback()
    // }
    // let checkPwd = (rule, value, callback) => {
    //   let pwdReg = /^[a-z0-9_-]{6,18}$/
    //   if (!pwdReg.test(value)) {
    //     return callback(new Error('请输入六位数以上的字符'))
    //   }
    //   callback()
    // }
    return {
      isVerificationShow1: false,
      isVerificationShow2: false,
      isVerificationShow3: false,
      isVerificationShow4: false,
      isVerificationShow5: false,
      VerificationBy: 0,
      puzzleImgList: [
        require('../assets/thumbnail-img01.jpg'),
        require('../assets/thumbnail-img02.jpg'),
        require('../assets/thumbnail-img03.jpg')
      ],
      user: {
        account: '',
        password: ''
      },
      maxlength: 11,
      input_focus1: false,
      input_focus2: false,
      rules: {
        account: [{ required: true, message: '请输入账号', trigger: 'blur' }],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 6, message: '密码不得少于6位', trigger: 'blur' }
        ]
      },
      action: {
        rsa: 'ssmService/rsa/generateRSAJsKey',
        login: 'ssmService/user/login'
      }
    }
  },
  watch: {
    isVerificationShow (val) {
      console.log('父组件-isVerificationShow', val)
    }
  },
  components: { PuzzleVerification },
  methods: {
    ...mapMutations(['saveLoginInfo', 'changeLoginState']),
    handleSuccess (user) {
      // console.log('验证成功了')
      this.isVerificationShow2 = false
      this.VerificationBy = 1
      this.login1()
      // this.login()
    },
    // handleClick (n) {
    //   switch (n) {
    //     case 1:
    //       this.isVerificationShow1 = true
    //       break
    //     case 2:
    //       this.isVerificationShow2 = true
    //       break
    //     case 3:
    //       this.isVerificationShow3 = true
    //       break
    //     case 4:
    //       this.isVerificationShow4 = true
    //       break
    //     default:
    //       this.isVerificationShow5 = true
    //   }
    // },
    login1 () {
      this.login()
    },
    login (refName) {
      // this.isVerificationShow2 = true
      // if (this.VerificationBy === 1) {
      // this.$refs[refName].validate(valid => {
      //   console.log(this.$refs[refName].validate)
      //   console.log(valid)
      //   if (valid) {
      // 校验通过
      // 对接登录
      this.getRsaKey(this.user.password, res => {
        let params = {
          account: this.user.account,
          password: res
        }
        http.xhrPost(this, this.action.login, params, result => {
          let user = result.data
          // eslint-disable-next-line camelcase
          let param = (({ user_id, account, name, level }) => ({
            user_id: user_id,
            account,
            name,
            level
          }))(user)
          this.saveLoginInfo(param)
          this.changeLoginState(1)
          console.log(param)
          this.$message({
            type: 'success',
            message: '登录成功,即将跳转页面',
            duration: 1000
          })
          this.$router.push('/')
        })
      })
      // }
      // else {
      // 校验不通过
      // return false
      // }
      // })
    },
    // 获取秘文
    getRsaKey (password, success = null) {
      http.xhrGet(this, this.action.rsa, null, rsa => {
        let keyArr = rsa.data.split(';')
        // 公钥模版
        let keyModule = keyArr[0]
        // 公钥指数
        let keyExponent = keyArr[1]
        // 生成公钥
        // eslint-disable-next-line no-undef
        let keyPair = RSAUtils.getKeyPair(keyExponent, '', keyModule)
        // 通过公钥加密密码
        password = password
          .split('')
          .reverse()
          .join('')
        // eslint-disable-next-line no-undef
        let newPwd = RSAUtils.encryptedString(keyPair, password)
        success(newPwd)
      })
    },
    // 点击input
    click_input (index) {
      if (index === 1) {
        this.input_focus1 = true
      }
      if (index === 2) {
        this.input_focus2 = true
      }
    }
  }
}
</script>

<style lang="stylus" scope>
@import "../assets/css/reset.css";
@import "../assets/css/login.css";
.login-box{
  margin-top:15%;
}
.container {
    padding-top: 100px;
    position: relative;
    display: flex;
    flex-flow: row wrap;
    .login-box {
      width: 400px;
      height: 300px;
    }
    .puzzle-box {
      position: absolute;
      // bottom: 0;
      // left: 0;
    }
    button {
      color: #fff;
      background-color: #50AAD0;
      border-color: #50AAD0;
      display: inline-block;
      line-height: 1;
      white-space: nowrap;
      cursor: pointer;
      background: #fff;
      border: 1px solid #dcdfe6;
      color: #606266;
      -webkit-appearance: none;
      text-align: center;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
      outline: 0;
      margin: 0;
      -webkit-transition: .1s;
      transition: .1s;
      font-weight: 500;
      padding: 12px 20px;
      font-size: 14px;
      border-radius: 4px;
      &:hover {
        border-color: #50AAD0;
      }
    }
  }
</style>
